<template>
  <div class="container">
    <!-- 主要内容 -->
    <el-row type="flex" justify="center" align="middle" class="main">
      <div class="form-wrapper">
        <!-- 表单头部tab -->
        <el-row type="flex" justify="center" class="tabs">
          <span
            :class="{active: currentTab === index}"
            v-for="(item, index) in [`登录`, `注册`]"
            :key="index"
            @click="handleChangeTab(index)"
          >{{item}}</span>
        </el-row>
        <!-- 登录页面 -->
        <loginForm v-if="currentTab==0" />
        <!-- 注册页面 -->
        <RegisterForm v-if="currentTab==1" @logintab="currentTab =0" />
      </div>
    </el-row>
  </div>
</template>

<script>
import RegisterForm from "@/components/user/registerForm";
import loginForm from "@/components/user/loginForm";
export default {
  components: {
    loginForm,
    RegisterForm
  },
  data() {
    return {
      currentTab: 0
    };
  },
  methods: {
    handleChangeTab(index) {
      this.currentTab = index;
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  height: 600px;
  min-width: 1000px;
  background: url(http://157.122.54.189:9095/assets/images/th03.jfif) center 0;
  .main {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    .form-wrapper {
      width: 400px;
      background-color: #fff;
      box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
      overflow: hidden;
      .tabs {
        span {
          display: block;
          width: 200px;
          height: 50px;
          line-height: 48px;
          border-top: 2px solid #eee;
          box-sizing: border-box;
          text-align: center;
          background-color: #eeeeee;
          color: #666;
          cursor: pointer;
          &.active {
            color: #ffa500;
            border-top: 2px solid #ffa500;
            background-color: #fff;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>